<template>
	<view>
		<!-- tabs头部 -->
		<view class="wC_tabs">
			<scroll-view :show-scrollbar="false" scroll-x scroll-with-animation :scroll-left="wScrollLeft"
				style="width: auto; height: 100%; overflow: hidden;">
				<view class="wC_tabsList">
					<template v-for="(item,index) in tabs">
						<view class="wC_tabsItem" :class="index == wActiveTab ? 'wC_active' : ''"
							hover-class="wC_hoverClass" :data-index="index" :key="index" @tap="handleTapItem">
							{{keyName == '' ? item : item[keyName]}}
						</view>
					</template>
					<view class="wC_tabsLine" :style="{'width': `${wLineWidth}px`, 'left': `${wLineLeft}px`}"></view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "wc_tabs",
		props: {
			value: {
				type: [String, Number],
				default: 0
			},
			tabs: {
				type: Array,
				default () {
					return []
				}
			},
			keyName: {
				type: String,
				default: '',
			},
		},
		data() {
			return {
				wActiveTab: 0,
				wScrollLeft: 0,
				wLineLeft: 0,
				wLineWidth: 0,
			};
		},
		watch: {
			wActiveTab(newVal) {
				this.$emit('input', newVal * 1)
			},
			value(newVal) {
				this.wActiveTab = parseInt(newVal);
				this.$nextTick(() => {
					// 组件方法-获取tabs的信息
					this.wCFun_getTabsInfo();
				})
			}
		},
		methods: {
			handleTapItem(e) {
				const index = e.currentTarget.dataset.index
				if (this.wActiveTab != index) {
					this.wActiveTab = parseInt(index);
					let setT = setTimeout(() => {
						// 组件方法-获取tabs的信息
						this.wCFun_getTabsInfo();
						this.$emit('change', this.wActiveTab);
						clearTimeout(setT);
					}, 100)
				}
			},
			/**
			 * wCFun_getTabsInfo
			 * 组件方法-获取tabs的信息
			 */
			wCFun_getTabsInfo() {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.wC_tabsList .wC_tabsItem')
					.boundingClientRect(data => {
						let wSystemInfo = uni.getSystemInfoSync();
						let wScrollLeft = 0;
						let wLineLeft = 0;
						let wLineWidth = 0;
						for (let i = 0; i < data.length; i++) {
							let wTabsItemInfo = data[i];
							if (i > this.wActiveTab) {
								break;
							} else if (i == this.wActiveTab) {
								wScrollLeft += parseFloat(wTabsItemInfo.width / 2);
								wLineWidth = parseFloat(wTabsItemInfo.width * 0.5);
								wLineLeft = (wTabsItemInfo.width - wLineWidth) / 2;
							} else {
								wScrollLeft += parseFloat(wTabsItemInfo.width);
							}
						}
						wScrollLeft = Math.floor((wScrollLeft - wSystemInfo.windowWidth / 2) * 100000000) /
							100000000; // 保留八位小数
						let wScrollLeft_new = (wScrollLeft < 0 ? 0 : wScrollLeft);

						this.wScrollLeft = wScrollLeft_new;
						this.wLineWidth = wLineWidth;
						this.wLineLeft = wScrollLeft + wSystemInfo.windowWidth / 2 - wLineLeft;
						// console.log('左间距：', wScrollLeft)
						// console.log('线条宽：', wLineWidth)
						// console.log('线条左间距', wLineLeft);
					})
					.exec()
			},
		},
		mounted() {
			this.wActiveTab = this.value;
			// 组件方法-获取tabs的信息
			this.wCFun_getTabsInfo();
		}
	}
</script>

<style lang="scss" scoped>
	// 点击样式
	.wC_hoverClass {
		opacity: 0.8;
		transform: translate(2rpx, 2rpx);
	}

	// tabs头部 
	.wC_tabs {
		display: block;

		.wC_tabsList {
			display: flex;
			flex-wrap: nowrap;
			// padding: 0 10rpx;
			box-sizing: border-box;
			position: relative;

			.wC_tabsItem {
				flex: none;
				height: 60rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				color: #333333;
				transition: all 0.3s;

				&:first-child {
					padding-left: 20rpx;
				}

				&:nth-last-child(2) {
					padding-right: 20rpx;
				}

				&.wC_active {
					font-size: 30rpx;
					color: #FF5A27;
					font-weight: bold;
					transition: all 0.3s;
				}

			}

			.wC_tabsLine {
				position: absolute;
				width: 0rpx;
				height: 6rpx;
				left: 0rpx;
				bottom: 0;
				z-index: 50;
				background-color: #FF5A27;
				border-radius: 6rpx;
				transition: all 0.7s;
			}
		}
	}
</style>
